<template>
  <div class="modern-dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-card modern-card modern-card--elevated">
        <div class="welcome-content">
          <div class="welcome-text">
            <h1 class="welcome-title">欢迎回来！</h1>
            <p class="welcome-subtitle">{{ currentUser.nickName || '管理员' }}，今天又是充满活力的一天</p>
            <div class="welcome-meta">
              <div class="meta-item">
                <el-icon><Calendar /></el-icon>
                <span>{{ currentDate }}</span>
              </div>
              <div class="meta-item">
                <el-icon><Sunny /></el-icon>
                <span>{{ currentTime }}</span>
              </div>
              <button 
                @click="loadStatistics" 
                :disabled="isLoading"
                class="modern-button modern-button--primary modern-button--small refresh-btn"
              >
                <el-icon class="refresh-icon" :class="{ 'is-loading': isLoading }">
                  <Refresh />
                </el-icon>
                <span>刷新数据</span>
              </button>
            </div>
          </div>
          <div class="welcome-avatar">
            <el-avatar 
              :size="80" 
              :src="currentUser.avatar || undefined" 
              class="user-avatar"
              :fit="'cover'"
            >
              <!-- 当没有头像时显示用户图标 -->
              <el-icon :size="32"><User /></el-icon>
            </el-avatar>
            <div class="avatar-status"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据统计卡片区域 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="stat-card stat-card-primary">
            <div class="stat-icon">
              <i class="el-icon-user-solid"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.userCount }}</div>
              <div class="stat-label">用户总数</div>
              <div class="stat-change positive">+12%</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="stat-card stat-card-success">
            <div class="stat-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.onlineCount }}</div>
              <div class="stat-label">在线用户</div>
              <div class="stat-change positive">实时</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="stat-card stat-card-warning">
            <div class="stat-icon">
              <i class="el-icon-document-copy"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.operLogCount }}</div>
              <div class="stat-label">操作记录</div>
              <div class="stat-change positive">最近</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="stat-card stat-card-danger">
            <div class="stat-icon">
              <i class="el-icon-cpu"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.systemUsage }}%</div>
              <div class="stat-label">CPU使用率</div>
              <div class="stat-change" :class="stats.systemUsage > 80 ? 'negative' : 'positive'">实时</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="20">
      <!-- 快速操作 -->
      <el-col :xs="24" :lg="8">
        <div class="content-card">
          <div class="card-header">
            <h3 class="card-title">快速操作</h3>
          </div>
          <div class="quick-actions">
            <div class="action-item" @click="navigateTo('/system/user')">
              <div class="action-icon action-icon-blue">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="action-content">
                <div class="action-title">用户管理</div>
                <div class="action-desc">管理系统用户信息</div>
              </div>
            </div>
            <div class="action-item" @click="navigateTo('/system/role')">
              <div class="action-icon action-icon-green">
                <i class="el-icon-key"></i>
              </div>
              <div class="action-content">
                <div class="action-title">角色管理</div>
                <div class="action-desc">配置用户角色权限</div>
              </div>
            </div>
            <div class="action-item" @click="navigateTo('/system/menu')">
              <div class="action-icon action-icon-orange">
                <i class="el-icon-menu"></i>
              </div>
              <div class="action-content">
                <div class="action-title">菜单管理</div>
                <div class="action-desc">设置系统菜单结构</div>
              </div>
            </div>
            <div class="action-item" @click="navigateTo('/monitor/operlog')">
              <div class="action-icon action-icon-purple">
                <i class="el-icon-document-copy"></i>
              </div>
              <div class="action-content">
                <div class="action-title">操作日志</div>
                <div class="action-desc">查看系统操作记录</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 系统信息 -->
      <el-col :xs="24" :lg="8">
        <div class="content-card">
          <div class="card-header">
            <h3 class="card-title">系统信息</h3>
          </div>
          <div class="system-info">
            <div class="info-item">
              <span class="info-label">系统版本</span>
              <span class="info-value">v{{ version }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">运行环境</span>
              <span class="info-value">{{ environment }}</span>
            </div>
            <div class="info-item" v-if="serverInfo.sys">
              <span class="info-label">操作系统</span>
              <span class="info-value">{{ serverInfo.sys.os }}</span>
            </div>
            <div class="info-item" v-if="serverInfo.jvm">
              <span class="info-label">Java版本</span>
              <span class="info-value">{{ serverInfo.jvm.version }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">服务器时间</span>
              <span class="info-value">{{ serverTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">上次登录</span>
              <span class="info-value">{{ lastLoginTime }}</span>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 最近动态 -->
      <el-col :xs="24" :lg="8">
        <div class="content-card">
          <div class="card-header">
            <h3 class="card-title">最近动态</h3>
          </div>
          <div class="recent-activities">
            <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
              <div class="activity-icon" :class="activity.type">
                <i :class="activity.icon"></i>
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
            <div v-if="recentActivities.length === 0" class="no-data">
              <i class="el-icon-document"></i>
              <p>暂无最近动态</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Calendar, 
  Sunny, 
  Refresh, 
  User,
  UserFilled,
  Key,
  Menu as MenuIcon,
  Document,
  Cpu
} from '@element-plus/icons-vue'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
import { getServer } from '@/api/monitor/server'
import { list as getOnlineUsers } from '@/api/monitor/online'
import { listUser } from '@/api/system/user'
import { list as getOperLogs } from '@/api/monitor/operlog'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()
const settingsStore = useSettingsStore()

// 响应式数据
const version = ref('3.9.0')
const environment = ref('开发环境')
const currentDate = ref('')
const currentTime = ref('')
const serverTime = ref('')
const lastLoginTime = ref('')
const currentUser = ref({
  nickName: '管理员',
  avatar: '' // 初始值为空字符串，等待 userStore 加载
})
const serverInfo = ref({})
const isLoading = ref(false)

// 统计数据
const stats = ref({
  userCount: 0,
  onlineCount: 0,
  operLogCount: 0,
  systemUsage: 0
})

// 最近动态
const recentActivities = ref([])

// 定时器
let timeInterval = null

// 计算欢迎卡片背景色
const getWelcomeBackground = computed(() => {
  if (settingsStore.isDark) {
    return '#000000' // 暗黑模式使用纯黑色背景
  }
  // 白天模式使用主题背景色渐变
  const navbarColor = settingsStore.navbarColor || '#667eea'
  return `linear-gradient(135deg, ${navbarColor} 0%, ${navbarColor}dd 100%)`
})

// 计算仪表板背景色
const getDashboardBackground = computed(() => {
  if (settingsStore.isDark) {
    return '#000000' // 暗黑模式使用纯黑色背景
  }
  // 白天模式使用页面背景色设置
  const pageColor = settingsStore.pageBackgroundColor || '#f8fafc'
  return `linear-gradient(135deg, ${pageColor} 0%, ${pageColor}dd 50%, ${pageColor}bb 100%)`
})

// 计算卡片背景色
const getCardBackground = computed(() => {
  if (settingsStore.isDark) {
    return '#000000'
  }
  // 白天模式下，卡片直接使用主题背景色
  return settingsStore.pageBackgroundColor || '#f8fafc'
})

// 计算文字颜色
const getTextColor = computed(() => {
  if (settingsStore.isDark) {
    return 'var(--el-text-color-primary)'
  }
  return '#1a202c'
})

// 计算次要文字颜色
const getSecondaryTextColor = computed(() => {
  if (settingsStore.isDark) {
    return 'var(--el-text-color-regular)'
  }
  return '#718096'
})

// 导航方法
function navigateTo(path) {
  router.push(path)
}

// 更新时间
function updateTime() {
  const now = new Date()
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
  currentTime.value = now.toLocaleTimeString('zh-CN')
  serverTime.value = now.toLocaleString('zh-CN')
}

// 初始化用户信息
function initUserInfo() {
  // 直接从 userStore 的状态中获取信息
  // userStore.avatar 已经包含了完整的头像处理逻辑（默认头像或用户头像）
  currentUser.value = {
    nickName: userStore.nickName || '管理员',
    avatar: userStore.avatar // 直接使用 userStore.avatar，它已经处理了默认头像
  }
  
  lastLoginTime.value = new Date().toLocaleString('zh-CN')
}

// 获取统计数据
async function loadStatistics() {
  isLoading.value = true
  try {
    // 并发请求提高性能
    const promises = [
      listUser({ pageNum: 1, pageSize: 1 }).catch(() => ({ total: 0 })),
      getOnlineUsers({}).catch(() => ({ total: 0 })),
      getOperLogs({ pageNum: 1, pageSize: 10 }).catch(() => ({ total: 0, rows: [] })),
      getServer().catch(() => null)
    ]
    
    const [userRes, onlineRes, operLogRes, serverRes] = await Promise.all(promises)
    
    // 更新统计数据
    stats.value.userCount = userRes.total || 0
    stats.value.onlineCount = onlineRes.total || 0
    stats.value.operLogCount = operLogRes.total || 0
    
    // 更新服务器信息
    if (serverRes) {
      serverInfo.value = serverRes
      if (serverRes.cpu) {
        stats.value.systemUsage = Math.round(serverRes.cpu.used || 0)
      }
    }
    
    // 构建最近动态数据
    if (operLogRes && operLogRes.rows && operLogRes.rows.length > 0) {
      const activities = operLogRes.rows.slice(0, 4).map((log, index) => {
        const timeDiff = getTimeDiff(log.operTime)
        return {
          id: index + 1,
          title: log.title || '系统操作',
          time: timeDiff,
          type: getActivityType(log.businessType),
          icon: getActivityIcon(log.businessType)
        }
      })
      recentActivities.value = activities
    } else {
      // 如果没有操作日志，显示默认信息
      recentActivities.value = [
        {
          id: 1,
          title: '系统启动成功',
          time: '刚刚',
          type: 'success',
          icon: 'el-icon-success'
        }
      ]
    }
    } catch (error) {
      console.error('加载统计数据失败:', error)
      ElMessage.warning('部分数据加载失败，请稍后再试')
    } finally {
      isLoading.value = false
    }
}

// 计算时间差
function getTimeDiff(operTime) {
  if (!operTime) return '刚刚'
  const now = new Date()
  const time = new Date(operTime)
  const diff = now - time
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)
  
  if (days > 0) return `${days}天前`
  if (hours > 0) return `${hours}小时前`
  if (minutes > 0) return `${minutes}分钟前`
  return '刚刚'
}

// 获取活动类型
function getActivityType(businessType) {
  const typeMap = {
    0: 'info',      // 其它
    1: 'primary',   // 新增
    2: 'warning',   // 修改
    3: 'danger',    // 删除
    4: 'success',   // 授权
    5: 'info',      // 导出
    6: 'info',      // 导入
    7: 'danger',    // 强退
    8: 'info',      // 生成代码
    9: 'danger'     // 清空数据
  }
  return typeMap[businessType] || 'info'
}

// 获取活动图标
function getActivityIcon(businessType) {
  const iconMap = {
    0: 'el-icon-info',
    1: 'el-icon-plus',
    2: 'el-icon-edit',
    3: 'el-icon-delete',
    4: 'el-icon-key',
    5: 'el-icon-download',
    6: 'el-icon-upload',
    7: 'el-icon-switch-button',
    8: 'el-icon-cpu',
    9: 'el-icon-delete'
  }
  return iconMap[businessType] || 'el-icon-info'
}

// 组件挂载
onMounted(async () => {
  updateTime()
  
  // 如果用户信息还没有加载，主动获取
  if (!userStore.nickName && userStore.token) {
    try {
      await userStore.getInfo()
    } catch (error) {
      console.error('获取用户信息失败:', error)
    }
  }
  
  initUserInfo()
  loadStatistics()
  
  // 每秒更新时间
  timeInterval = setInterval(updateTime, 1000)
  
  // 监听主题切换事件
  window.addEventListener('themechange', handleThemeChange)
})

// 组件卸载
onBeforeUnmount(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
  window.removeEventListener('themechange', handleThemeChange)
})

// 处理主题切换
function handleThemeChange() {
  // 强制重新计算所有计算属性
  nextTick(() => {
    // 触发响应式更新
    const temp = settingsStore.isDark
    // 这里可以添加任何需要在主题切换时执行的逻辑
  })
}
</script>

<style scoped lang="scss">
.modern-dashboard {
  padding: var(--spacing-6);
  background: v-bind(getDashboardBackground);
  min-height: 100vh;
  font-family: var(--font-family-sans);
  color: var(--color-gray-900);
  transition: var(--transition-base);
}

// 欢迎区域
.welcome-section {
  margin-bottom: var(--spacing-6);
}

.welcome-card {
  background: v-bind(getWelcomeBackground);
  color: white;
  padding: var(--spacing-8);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    transform: translate(50px, -50px);
  }
}

.welcome-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.welcome-text {
  flex: 1;
}

.welcome-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-2) 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-subtitle {
  font-size: var(--text-lg);
  margin: 0 0 var(--spacing-4) 0;
  opacity: 0.9;
}

.welcome-meta {
  display: flex;
  gap: var(--spacing-6);
  align-items: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  opacity: 0.9;
}

.refresh-btn {
  margin-left: var(--spacing-4);
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  
  .refresh-icon {
    transition: var(--transition-base);
    
    &.is-loading {
      animation: spin 1s linear infinite;
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.welcome-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .user-avatar {
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
    background: rgba(255, 255, 255, 0.1);
    
    // 确保图标显示
    .el-icon {
      color: rgba(255, 255, 255, 0.8);
      font-size: 32px;
    }
    
    &:hover {
      transform: scale(1.05);
      border-color: rgba(255, 255, 255, 0.5);
    }
  }
  
  .avatar-status {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: var(--color-success-500);
    border: 2px solid white;
    border-radius: var(--radius-full);
  }
}

// 统计卡片区域
.stats-section {
  margin-bottom: 24px;
}

.stat-card {
  background: v-bind(getCardBackground);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  color: v-bind(getTextColor);
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    transition: all 0.3s ease;
  }
  
  &.stat-card-primary::before {
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  }
  
  &.stat-card-success::before {
    background: linear-gradient(180deg, #56ab2f 0%, #a8e6cf 100%);
  }
  
  &.stat-card-warning::before {
    background: linear-gradient(180deg, #f093fb 0%, #f5576c 100%);
  }
  
  &.stat-card-danger::before {
    background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
  }
  
  .stat-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.1;
    
    i {
      font-size: 32px;
    }
  }
  
  .stat-content {
    position: relative;
    z-index: 1;
  }
  
  .stat-number {
    font-size: 32px;
    font-weight: 700;
    color: v-bind(getTextColor);
    margin-bottom: 4px;
  }
  
  .stat-label {
    font-size: 14px;
    color: v-bind(getSecondaryTextColor);
    margin-bottom: 8px;
  }
  
  .stat-change {
    font-size: 12px;
    font-weight: 600;
    
    &.positive {
      color: #38a169;
    }
    
    &.negative {
      color: #e53e3e;
    }
  }
}

// 内容卡片
.content-card {
  background: v-bind(getCardBackground);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  color: v-bind(getTextColor);
  
  &:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}

.card-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  
  /* 暗黑模式下使用不同的背景 */
  @at-root .dark & {
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: v-bind(getTextColor);
  margin: 0;
}

// 快速操作
.quick-actions {
  padding: 20px;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  
  &:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    transform: translateX(4px);
  }
  
  &:last-child {
    margin-bottom: 0;
  }
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  
  i {
    font-size: 20px;
    color: white;
  }
  
  &.action-icon-blue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  &.action-icon-green {
    background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  }
  
  &.action-icon-orange {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }
  
  &.action-icon-purple {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 16px;
  font-weight: 600;
  color: v-bind(getTextColor);
  margin-bottom: 4px;
}

.action-desc {
  font-size: 14px;
  color: v-bind(getSecondaryTextColor);
}

// 系统信息
.system-info {
  padding: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  
  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  font-size: 14px;
  color: v-bind(getSecondaryTextColor);
}

.info-value {
  font-size: 14px;
  font-weight: 600;
  color: v-bind(getTextColor);
}

// 最近动态
.recent-activities {
  padding: 20px;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  
  &:last-child {
    border-bottom: none;
  }
}

.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  
  &.success {
    background: #f0fff4;
    color: #38a169;
  }
  
  &.info {
    background: #ebf8ff;
    color: #3182ce;
  }
  
  &.primary {
    background: #f7fafc;
    color: #805ad5;
  }
  
  &.warning {
    background: #fffaf0;
    color: #d69e2e;
  }
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  font-weight: 500;
  color: v-bind(getTextColor);
  margin-bottom: 2px;
}

.activity-time {
  font-size: 12px;
  color: #a0aec0;
}

.no-data {
  text-align: center;
  padding: 40px 20px;
  color: v-bind(getSecondaryTextColor);
  
  i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }
  
  p {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
  }
}

// 暗黑模式适配 - 现代化暗黑主题
html.dark {
  .modern-dashboard {
    color: var(--color-gray-50);
  }
  
  .welcome-card {
    border: 1px solid var(--color-gray-700);
    
    .user-avatar {
      background: rgba(255, 255, 255, 0.05) !important;
      border-color: rgba(255, 255, 255, 0.2) !important;
      
      .el-icon {
        color: rgba(255, 255, 255, 0.9) !important;
      }
      
      &:hover {
        border-color: rgba(255, 255, 255, 0.4) !important;
      }
    }
  }
  
  // 统计卡片暗黑模式
  .stat-card {
    background: var(--color-gray-800) !important;
    border: 1px solid var(--color-gray-700);
    
    .stat-number {
      color: var(--color-gray-50) !important;
    }
    
    .stat-label {
      color: var(--color-gray-300) !important;
    }
    
    &:hover {
      background: var(--color-gray-700) !important;
      border-color: var(--color-gray-600);
    }
  }
  
  // 内容卡片暗黑模式
  .content-card {
    background: var(--color-gray-800) !important;
    border: 1px solid var(--color-gray-700);
    
    .card-header {
      background: var(--color-gray-700);
      border-bottom-color: var(--color-gray-600);
    }
    
    .card-title {
      color: var(--color-gray-50) !important;
    }
    
    &:hover {
      background: var(--color-gray-750) !important;
      border-color: var(--color-gray-600);
    }
  }
  
  // 快速操作项暗黑模式
  .action-item {
    &:hover {
      background: var(--color-gray-700) !important;
      border-color: var(--color-gray-600);
    }
  }
  
  .action-title {
    color: var(--color-gray-50) !important;
  }
  
  .action-desc {
    color: var(--color-gray-300) !important;
  }
  
  // 系统信息暗黑模式
  .info-item {
    border-bottom-color: var(--color-gray-700);
  }
  
  .info-label {
    color: var(--color-gray-300) !important;
  }
  
  .info-value {
    color: var(--color-gray-50) !important;
  }
  
  // 活动项暗黑模式
  .activity-item {
    border-bottom-color: var(--color-gray-700);
  }
  
  .activity-title {
    color: var(--color-gray-50) !important;
  }
  
  .activity-time {
    color: var(--color-gray-400) !important;
  }
  
  // 活动图标暗黑模式
  .activity-icon {
    &.success {
      background: rgba(34, 197, 94, 0.2);
      color: var(--color-success-400);
    }
    
    &.info {
      background: rgba(59, 130, 246, 0.2);
      color: var(--color-info-400);
    }
    
    &.primary {
      background: rgba(99, 102, 241, 0.2);
      color: var(--color-brand-400);
    }
    
    &.warning {
      background: rgba(245, 158, 11, 0.2);
      color: var(--color-warning-400);
    }
  }
  
  // 无数据状态暗黑模式
  .no-data {
    color: var(--color-gray-400) !important;
    
    i {
      opacity: 0.3;
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .modern-dashboard {
    padding: var(--spacing-4);
  }
}

@media (max-width: 768px) {
  .modern-dashboard {
    padding: var(--spacing-3);
  }
  
  .welcome-card {
    padding: var(--spacing-6);
  }
  
  .welcome-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-5);
  }
  
  .welcome-title {
    font-size: var(--text-3xl);
  }
  
  .welcome-meta {
    flex-direction: column;
    gap: var(--spacing-3);
  }
}
</style>
